 <template>
  <div class="pageCtcSetting">
    <PageHeader :lang="lang"></PageHeader>
    <!--资产总览-->
    <div class="pageBody" id="pageBody">
      <!-- 左侧部分 -->
      <pageLeftMenu></pageLeftMenu>
      <!-- 右侧部分 -->
      <div class="pageMain">
        <div class="content">
          <!-- 支付宝 -->
          <div class="aliPay">
            <div class="mainHead">
              <img src="./images/alipay.png" height="22" width="22" alt="">
              <h3 class="mainTitle">{{lang['alipay account']}}</h3>
            </div>
            <div class="accunt" v-if="!AalipayList.length > 0">
              <div  class="Add_toCad Add_Aalipay">
                <a href="javascript:;" @click="Addbankcard(1)">{{lang['please bind Alipay account']}}</a>
              </div>
            </div>
            <div class="Paymentaccount" v-else>
              <div class="AlipayList Alipay">
                  <li v-for="(item, index) in AalipayList" @mouseover="liEnters(index)" @mouseout="liEnterHides(index)">
                    <div>
                      <img :src="item.PayImg" class="ioc"  @click="amplification(item.PayImg)">
                      <p class="name">{{item.Name}}</p>
                      <p class="auccount">{{item.Account}}</p>
                      <p v-show="deleteShows === index" style="position: absolute; right:-10px; top:-10px;">
                        <a class="deleteAccount" href="javascript:;" @click="deleteAccount(item.ID)"></a>
                      </p>
                    </div>
                  </li>
                </div>
            </div>
          </div>
          <!-- 微信 -->
          <div class="weChatPay">
            <div class="mainHead">
              <img src="./images/weChat.png" height="22" width="22" alt="">
              <h3 class="mainTitle">{{lang['weChat account']}}</h3>
            </div>
            <div class="accunt" v-if="!AwechatList.length > 0">
              <div class="Add_toCad Add_Awechat">
                <a href="javascript:;" @click="Addbankcard(2)">{{lang['please bind to WeChat account']}}</a>
              </div>
            </div>
            <div class="Paymentaccount" v-else>
              <div class="AlipayList Awechat">
                  <li v-for="(item, index) in AwechatList" @mouseover="liEnter(index)" @mouseout="liEnterHide(index)">
                    <div>
                      <img :src="item.PayImg"class="ioc" @click="amplification(item.PayImg)">
                      <p class="name">{{item.Name}}</p>
                      <p class="auccount">{{item.Account}}</p>
                      <p v-show="deleteShow === index" style="position: absolute; right:-10px; top:-10px;">
                        <a class="deleteAccount" href="javascript:;" @click="deleteAccount(item.ID)"></a>
                      </p>
                    </div>
                  </li>
                </div>
            </div>
          </div>
          <!-- 添加第三方支付 -->
          <SwModal :isShow.sync="isShowAddCard" :isCloseOnClickBg="true" modalClass="userModal"  :isShowBg="true" :isShowCloseBtn="true">
            <div class="addAccountState">
              <h1 v-show="PayType === 1">{{lang['Add Alipay account']}}</h1>
              <h1 v-show="PayType === 2">{{lang['Add Wechat account']}}</h1>
              <div>
                <span>{{lang['surnameAndPersonalName']}}</span>
                <input type="text" v-model="realNames = mixUserInfo.realName" :placeholder="lang['Please input your full name']" maxlength="20">
              </div>
              <div v-show="PayType === 1">
                <span>{{lang['alipay account']}}</span>
                <input v-model="inputAccount" :placeholder="lang['Please enter Alipay account']" type="text" maxlength="30">
              </div>
              <div v-show="PayType === 2">
                <span>{{lang['weChat account']}}</span>
                <input v-model="webchatAccount" :placeholder="lang['Please enter Wechat account']" type="text" maxlength="30">
              </div>
              <div>
                <span>{{lang['basic_capitalPassword']}}</span>
                <input v-model="inputPassword" :placeholder="lang['41014']" type="password"></div>
              <p style="text-align: center; padding-left:10px; position:relative">
                <a class="upimg"><b>＋</b> <span>{{lang['upload receipt code']}}</span></a>
                <label class="file" for="CirdPositive"></label>
                <input type="file" name="CollectionCodeImage" id="CirdPositive" style="display:none" ref="AccountFile" @change="changePhone('AccountFile', 'imgUrl')" accept="image/gif,image/jpeg,image/jpg,image/png" />
                <img style="width:20%; margin: 15px auto;" :src="imgUrl" v-show="AccountImg"/>
                <a class="saveAccount" @click="setAddAccount" href="javascript:;">{{lang['save']}}</a>
              </p>
            </div>
          </SwModal>
          <SwModal :isShow.sync="isShowAssetPassword" :isCloseOnClickBg="true" modalClass="userModal" :isShowCloseBtn="true" :isShowBg="true" :okText="lang['determineBth']" >
            <div class="safety_verification-b">
              <div class="title">
                {{lang['safety verification']}}
                <a class="close_safety" @click="isShowAssetPassword = false">
                  <img src="../../assets/images/page/asset_03.png"></a>
              </div>
              <ul>
                <li>
                  <p class="text">{{lang['basic_capitalPassword']}}</p>
                  <p class="inpu">
                    <input type="password" class="paddingL10" name="" :placeholder="lang['pleaseEnterAFundPassword']" v-model="assetPassword" maxlength="20" minlength="8"></p>
                </li>
                <li>
                  <button type="button" class="subitmBox" @click="confirmAssetPassword">{{lang['determineBth']}}</button>
                  <!-- <router-link to="/safety/mony_certification"></router-link> -->
                  <a href="javascript:;" class="shutdown"  @click="onClosed" v-html="lang['forget fund password']"></a>
                </li>
              </ul>
            </div>
          </SwModal>
        </div>
      </div>
    </div>

    <!--资产总览-->
    <PageFooter2 :lang="lang"></PageFooter2>
    <!--临时写个遮罩，来不及解释了妈的草-->
    <div class="escrow-zhe-zhao" v-if="IsFd"> 
      <div class="escrow-zhe-zhaoimg">
          <img class="close-btn" src="./images/close2.png" @click="IsFd = false">
          <img class="tempIconFd" :src="fdImgSrc">
      </div>
    </div>

  </div>
</template>
<script>
import commonMixins from '@/mixins/common.js'
import SwModal from '@/components/SwModal'
import ModalApi from '@/components/SwModal/api.js'
import Utils from '@/utils/Utils.js'
import commonFilter from '@/filters/common.js'
import pageLeftMenu from './components/pageLeftMenu.vue'

export default {
  mixins: [commonMixins],
  data () {
    return {
      currentIndexs: 0,
      limitNum: 3,
      adfasdf: false,
      showModal: false,
      isShowWithdraw: false,
      isShowAddCard: false,
      isShowAssetPassword: false,
      list: [],
      show: false,
      phone: '',
      zijinmima: false,
      inputs: {
        sname: '',
        yhmc: '',
        yhzh: '',
        yhdz: '',
        swlftcode: ''
      },
      safePwd: '',
      assetPassword: '',
      Announcement: true,
      amount: '',
      AvailableAmounts: '',
      quanbutixian: '',
      chikaren: '',
      yinghang: '',
      zhanghao: '',
      yinghangID: '',
      currentCard: {},
      tishiyu: '',
      isShowGoogleVerify: false,
      withdrawConfig: null,
      USDAssetId: '',
      googleCode: '',
      indexMore: '',
      deleteShow: '',
      deleteShows: '',
      isMore: true,
      inputAccount: '',
      webchatAccount: '',
      inputPassword: '',
      imgUrl: '',
      AlipayListSubscript: 0,
      AwechatListSubscript: 0,
      AalipayList: [],
      AwechatList: [],
      AccountFile: '',
      AccountImg: null,
      PayType: '',
      fdImgSrc: '',
      IsFd: false
    }
  },
  components: {
    SwModal,
    pageLeftMenu
  },
  methods: {
    deleteAccount (itemID) {
      let confirm = ModalApi.confirm({
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        modalClass: 'userModal',
        title: 'prompt message',
        content: 'Confirm Bank Account removal',
        okText: 'delete',
        noText: '',
        isShowBg: true,
        ok: () => {
          this.$host2.post('Collection/UnBindPayAccount', {
            CollectionAccounID: itemID
          }, {
            modalOptions: {
              modalClass: 'userModal'
            }
          })
          .then((res) => {
            this.getAlipayList()
            this.getAwechatList()
            confirm.close()
          })
        },
        no: () => {
          confirm.close()
        }
      })
    },
    getImgBase64 (fileNode) {
      let files = fileNode.files
      let promise = Utils.makePromise()
      let size = files[0].size / 1024
      let reader = new FileReader()
      reader.readAsDataURL(files[0])
      reader.onload = function (e) {
        if (size > 5000) {
          promise.rejectHandle()
        } else {
          promise.resolveHandle(this.result)
        }
      }
      return promise
    },
    changePhone (photoRef, img) {
      // 文件重选点取消，input会自动清空上一次所选
      // 取消后会清空图片节点，保存时获取不到图片节点，会提示请上传收款码
      if (!this.$refs[photoRef].files.length) {
        return
      }
      this.getImgBase64(this.$refs[photoRef]).then((res) => {
        this.AccountImg = this.$refs[photoRef].files[0]
        this[img] = res
      })
    },
    setAddAccount () {
      if (this.realNames === '') {
        ModalApi.message(this.lang['Please input your full name'], null, null, 'userModal')
        return false
      }

      if (this.PayType === 1 && this.inputAccount === '') {
        ModalApi.message(this.lang['Please enter Alipay account'], null, null, 'userModal')
        return false
      } else if (this.PayType === 2 && this.webchatAccount === '') {
        ModalApi.message(this.lang['Please enter Wechat account'], null, null, 'userModal')
        return false
      }

      if (this.inputPassword === '') {
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], null, null, 'userModal')
        return false
      }
      if (!this.AccountImg) {
        ModalApi.message(this.lang['Please upload the receipt code'], null, null, 'userModal')
        return false
      }
      let formData = new FormData()
      formData.append('Account', this.inputAccount || this.webchatAccount)
      formData.append('PayType', this.PayType)
      formData.append('TransactionPassword', this.inputPassword)
      formData.append('Name', this.realNames)
      formData.append('CollectionCode', this.AccountImg)
      this.$host2.post('Collection/BindPayAccount', formData, {
        config: {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        },
        isShowLoading: true,
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        if (res.StatusCode === '200') {
          this.realNames = ''
          this.inputAccount = ''
          this.webchatAccount = ''
          this.AccountImg = null
          this.inputPassword = ''
          this.$refs.AccountFile.value = ''
          ModalApi.message(this.lang['upload Success'], null, null, 'userModal')
          if (this.PayType === 1) {
            this.getAlipayList()
          } else {
            this.getAwechatList()
          }
          this.isShowAddCard = false
        }
      })
    },
    // Alipay 账号数据
    getAlipayList () {
      this.imgUrl = ''
      this.$host2.post('Collection/GetPayAccountList', {
        PayType: 1
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        this.AalipayList = res.Data || []
        this.AalipayList.forEach((v, i) => {
          if (v.IsDefault === true) {
            this.AlipayListSubscript = i
          }
        })
      })
    },
    getAwechatList () {
      this.imgUrl = ''
      this.$host2.post('Collection/GetPayAccountList', {
        PayType: 2
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {
        this.AwechatList = res.Data || []
        this.AwechatList.forEach((v, i) => {
          if (v.IsDefault === true) {
            this.AwechatListSubscript = i
          }
        })
      })
    },
    liEnters (e) {
      this.deleteShows = e
    },
    liEnterHides (e) {
      this.deleteShows = false
    },
    liEnter (e) {
      this.deleteShow = e
    },
    liEnterHide (e) {
      this.deleteShow = false
    },
    deleteBanCard (itemID) {
      let confirm = ModalApi.confirm({
        isShowCloseBtn: true,
        isCloseOnClickBg: true,
        modalClass: 'userModal',
        title: 'prompt message',
        content: 'Confirm Bank Account removal',
        okText: 'delete',
        noText: '',
        isShowBg: true,
        ok: () => {
          this.$host1.post('BankUser/DisableBankCard', {
            id: itemID
          })
          .then((res) => {
            confirm.close()
            this.jiazaiyinghangka()
          })
        },
        no: () => {
          confirm.close()
        }
      })
    },
    withdrawalAll () {
      this.amount = commonFilter.fillDecimal(this.AvailableAmounts, 2)
    },
    quanbutixiansa () {
      this.quanbutixian = this.AvailableAmounts
    },
    currentIndex (item = {}, index) {
      this.chikaren = item.CardUserName
      this.yinghang = item.BankName
      this.zhanghao = item.CardNumber
      this.yinghangID = item.ID
      this.currentIndexs = index
      this.adfasdf = true
      this.$http.post('BankUser/SetDefault', {
        id: item.ID
      }, {
        modalOptions: {
          modalClass: 'userModal'
        }
      })
      .then((res) => {

      })
    },
    onClosed () {
      this.isShowAddCard = false
      this.showModal = false
      this.isShowAssetPassword = false
      setTimeout(() => {
        this.$router.push({path: '/safety'})
      }, 300)
    },
    Addbankcard (e) {
      if (e === 1) {
        this.PayType = e
      } else {
        this.PayType = e
      }
      this.inputAccount = ''
      this.webchatAccount = ''
      this.AccountImg = null
      this.inputPassword = ''
      this.$refs.AccountFile.value = ''
      this.isShowAddCard = !this.isShowAddCard
      this.inputs.sname = this.mixUserInfo.realName
    },
    confirmAssetPassword () {
      if (this.assetPassword !== '') {
        this.inputs.yhzh.replace(/\s+/g, '')
        this.$http.post('BankUser/AddCard', {
          BankName: this.inputs.yhmc,
          CardNumber: this.inputs.yhzh,
          CardUserName: this.inputs.sname,
          Branch: this.inputs.yhdz,
          SWIFTCode: this.inputs.swlftcode,
          IsDefault: true,
          TransactionPassword: this.assetPassword,
          ClientType: 0
        }, {
          // mock: 'GetBankList'
          modalOptions: {
            modalClass: 'userModal'
          }
        })
        .then((res) => {
          if (res.StatusCode === '200') {
            this.isShowAddCard = false
            this.isShowAssetPassword = false
            this.showModal = true
            this.tishiyu = this.lang['add success']
            this.jiazaiyinghangka()
          }
        })
      } else {
        ModalApi.message(this.lang['pleaseEnterAFundPassword'], null, null, 'userModal')
      }
    },
    // 点击二维码放大
    amplification (src) {
      this.fdImgSrc = src
      this.IsFd = true
    }
  },
  mounted () {
    this.indexMore = this.lang['indexMore']
    this.getAlipayList()
    this.getAwechatList()
  }
}
</script>

<style lang="less" scoped>
.pageCtcSetting{
  position: relative;
  .escrow-zhe-zhao{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: rgba(0,0,0,.5);
  }
  .escrow-zhe-zhaoimg{
      padding: 40px;
      position: absolute;
      top: 35%;
      left: 50%;
      transform: translate(-50%, -50%);
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #1a1f2b;
      flex-wrap: wrap;

      .tempIconFd {
        max-width: 300px;
        max-height: 300px;
      }
      .close-btn {
        position: absolute; 
        top: 10px;
        right: 10px;
        width: 10px;
      }
  }
}
  .userModal{
    .head{
      text-align: center;
    }
    .sw-confirm{
      text-align: center;
    }
  }
    .addAccountState {
      color: #c4c9c7;
      width: 600px;
      padding: 30px;
      h1{
        font-size: 16px;
        text-align: center;
      }
      .buttons {
        display: block;
        text-align: center;
        color: #213763;
        line-height: 70px;
      }
      .saveAccount {
        display: block;
        font-weight: 100px;
        text-align: center;
        background: #3782FF;
        border-radius: 2px;
        color: #c4c9c7;
        width: 220px;
        height: 40px;
        margin: 50px auto 0;
        line-height: 40px;
      }
      div {
        width: 400px;
        margin: 20px auto;
         span {
          display: block;
          color: #D4D4D4;
          margin-right: 10px;
          margin-left: 10px;
          margin-bottom: 10px;
          text-align: left;
        }
      input {
        display: block;
        color: #bbb;
        border: none;
        line-height: 46px;
        height: 46px;
        width: 100%;
        padding: 0 10px;
        background: #2A3440;
        border-radius: 2px;
        }
      }
      .upimg {
        display: block;
        z-index: 2;
        position: absolute;
        top: 0;
        width: 300px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        left: 0;
        right: 0;
        margin: 0 auto;
        border: dashed 1px #999;
        b{
          line-height: normal;
          font-size: 28px;
          font-weight: lighter;
        }
        span{
          font-weight: lighter;
          position: relative;
          top: -3px;
        }
      }
      .file {
        display: inline-block;
        margin: 10px auto;
        color: #213763;
        cursor: pointer;
        text-align: center;
        display: block;
        cursor: pointer;
        width: 300px;
        height: 40px;
        position: relative;
        z-index: 3;
      }
    }
  .safety_verification-b {
    width: 480px;
    background: #1A1F2B;
    border-radius: 5px;
    position: fixed;
    left: 50%;
    color: #c4c9c7;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 0 36px;
  .title {
    height: 28px;
    line-height: 28px;
    text-align: center;
    padding: 26px 0 16px;
    img {
      vertical-align: middle;
      text-align: center;
    }
    .close_safety {
      float: right;
    }
  }

  li {
    text-align: center;
    position: relative;
  .text {
    text-align: left;
    padding-bottom: 10px;
    padding-top: 30px;
    padding-left: 10px;
  }
  .inpu {
    position: relative;
      input {
        font-weight: lighter;
        box-sizing: border-box;
        line-height: 40px;
        height: 40px;
        width: 100%;
        background: #2A3440;
        border-radius: 2px;
        color: #c4c9c7;
        padding: 0 10px;
      }
      input[disabled='disabled'] {
        background: #fafdff;
      }
    }
    .subitmBox {
      font-weight: lighter;
      display: inline-block;
      height: 40px;
      line-height: 40px;
      border-radius: 2px;
      width: 220px;
      background: #3782FF;
      color: #c4c9c7;
      margin: 36px auto;
    }
    .shutdown{
      font-weight: lighter;
      color: #fff;
      position: absolute;
      right: 0;
      top: 5px;
      font-size: 12px;

      font {
        color: #3782FF;
      }
    }
  }
 }
.pageCtcSetting{
    .Paymentaccount{
      position: relative;
    }
    .accunt{
      position: relative;
    }
    .AlipayList li div {
      position: relative;
    }
    .AlipayList li div p {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 30px;
      a{
        background: url(./images/delete.png);
        display:inline-block;
        width: 15px;
        height: 16px;
      }
    }
    .AlipayList li {
      display: inline-block;
      float: left;
      width: 100%;
      height: 195px;
      border-radius: 2px;
      color: #c4c9c7;
      text-align: center;
      cursor: pointer;
      position: relative;
      .ioc{
        margin: 15px auto 0;
        width: 21%;
        display: block;
      }
      p {
        padding: 0 20px;
        color: #fff
      }
      .name {
        margin-top: 15px;
      }
    }
    .Alipay {
      background: #3782FF;
      left: 90px;
    }
    .Awechat {
      right: 90px;
      background: #50B674;
    }
    .AlipayList li.addcla {
      position: relative;
      border: 1px solid #213763;
    }
    .AlipayList li.addcla:after {
      content: '';
      position: absolute;
      top: 5px;
      right: 3px;
      display: inline-block;
      border-radius: 50%;
      width: 20px;
      height: 20px;
    }
  font-weight: 100;
  color: #c4c9c7;
  .mainHead{
    width: 40%;
    display: inline-block;
    height: 48px;
    line-height: 48px;
    color: #c4c9c7;
    padding:0 20px;
    background: #202832;
    img{
      display: inline-block;
      vertical-align: -12%;
    }
    h3{
      margin-left: 10px;
      font-size: 14px;
      display: inline-block;
      font-weight: 100;
    }
    span{
    letter-spacing:1.5px;
    }
  }
  .mainHead + .mainHead {
    float: right;
  }
  .ketiyue{
    top: 0;
    left: 0;
    font-size: 16px;
  }
  .paddingL10{padding:0 10px;}
  .more a{color:#c4c9c7;}

  .gg_background{ background-color: rgba(0,0,0,.8); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 200;  }
  .bankcard_card {
    position: relative;
    top: 20px;
  }
  .listContent{
    display: block;
    position: absolute;
    z-index: 1;
    width: 100%;
    padding-top:15px;
    top: 0;
    left: 0;
    .text{
      position: relative;
      line-height: 25px;
      text-align: center;
      top: 80px;
    }
    p:nth-of-type(1n){
      padding: 0 15px;
    }
  }
  .Add_toCad{
      a{
        background: url(./images/add.png) no-repeat center 65px;
        display: block;
        width: 296px;
        overflow: hidden;
        height: 193px;
        line-height: 250px;
        border:dashed 1px #999;
        text-align: center;
        margin: 0 auto;
        color: #c4c9c7;
    }
  }
  .Add_Aalipay{
    left: 90px;
  }
  .Add_Awechat{
    right: 90px;
  }
  .amount {
    clear: both;
    position: relative;
    top: 50px;
    .Extract_amount {
      display: inline-block;
      position: absolute;
      right: 0;
      div{
        margin-top: 35px;
      }
      span {
        display: inline-block;
        color: #fff;
        font-size: 16px;
        padding-right: 10px;
      }
      input {
        width: 250px;
        padding: 0 10px;
        height: 36px;
        color: #fff;
        line-height: 36px;
        background: #28282e;
        border-radius: 2px;
      }
      input::-webkit-input-placeholder {
        color: #737980;
      }
      button {
        width: 260px;
        height: 36px;
        line-height: 36px;
        background: #3782FF;
        font-size: 16px;
        border-radius: 2px;
        text-align: center;
        float: right;
        color: #c4c9c7;
        font-weight: 100;
      }
    }
  }

  .bankcard_tishi{
    color: #bbb;
    font-size: 12px;
  }
  .bankcard_tishi h3{
    padding-bottom: 15px;
  }
  .bankcard_tishi p {
    font-size: 12px;
    line-height: 30px;
  }
  /*弹窗*/
  .addbank_pop{
    text-align:center;
    width:580px;
    height: 210px;
    padding-top: 90px;
    background-color: #c4c9c7;
    border-radius: 5px;
  }
  .addbank_pop p{
    font-size:20px;
    line-height:30px;
    padding-top: 20px;
  }
}
  .withdraw_pop{
    width:580px;
    color: #c4c9c7;
    background: #3782FF;
  }


  .withdraw_pop ul{
    line-height: 40px;
    padding: 0 50px;
    font-size:20px;
  }
  .withdraw_pop ul li{
    height: 40px;
    padding-top: 30px;

  }
  .withdraw_pop ul li label{
    display: inline-block;
    font-size:20px;
    float: left;
  }
  .withdraw_pop ul li label span{
    display: inline-block;
    margin-right: 30px;
    line-height: 20px;
  }
  .withdraw_pop ul p{
    display: inline-block;
  }
  .withdraw_pop ul input{
    width:100%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    padding:0 5px;
    border-radius:5px;
    border:solid 1px #999;
  }
  .bankcard_add {
    overflow: hidden;
    width: 602px;
    margin: 0 auto;
    margin-top: 40px;
    p span {
      display: inline-block;
      line-height: 25px;
      font-size: 15px;
      color: #c4c9c7;
    }
    input::-webkit-input-placeholder {
      color: #dedede
    }
  h2 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 30px;
    color: #c4c9c7;
  }
  li {
      width:400px;
      margin:0 auto;
      height: 100px;
    p{
      padding-left: 10px;
      margin-bottom: 5px;
      span{
        color: #c3c3c4;
      }
    }
    input{
      width: 100%;
      font-size: 14px;
      color: #c4c9c7;
      font-weight: lighter;
      text-align: left;
      text-indent: 10px;
      background: #2A3440;
      height: 46px;
      line-height: 46px;
      border-radius: 2px;
    }
    input::-webkit-input-placeholder {
      color: #737980;
    }
  }
  .sumbitBox{
    width: 310px;
    height: 46px;
    line-height: 46px;
    background:#3559a0;
    font-size:16px;
    border-radius: 5px;
    text-align:center;
    color: #c4c9c7;
    display: block;
    margin:0 auto;

  }
}

.pageMain {
  .content {
    min-height: 438px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    
    .aliPay, .weChatPay {
      flex: 1;
      margin-right: 20px;

      .mainHead, .accunt, .Paymentaccount {
        width: 90%;
        margin-top: 30px;
      }
      .mainHead {
        margin-top: 0;
        box-sizing: border-box;
      }

      .Paymentaccount {
        display: flex;
        justify-content: center;

       .AlipayList {
          width: 300px;
          height: 195px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;

          img {
            width: 85px;
            height: 85px;
            border-radius: 10px;
            margin-bottom: 15px;
          }

          .name {
            margin-bottom: 5px;
          }

          p {
            text-align: center;
          }
        }
        .Add_Aalipay  {
          background-color: #3782FF;
        }
        .Add_Awechat {
          background-color: #50B674;
        }
      }
    }

    .weChatPay {
      margin-right: 0;
    }
  }
}
@media screen and (max-width: 1000px){
  .pageMain .content {

    .aliPay, .weChatPay {

      .mainHead {
        width: 95%;
        min-width: 265px;
      }
      .Paymentaccount {
        width: 95%;
        min-width: 265px;
        .AlipayList {
          width: 265px;
          height: 176px;
          .name {
            margin-bottom: 0;
          }
        }
      }
    }
  }
}

</style>
